/**
 * @descripition 通过指定选择器获取相应节点
 * @param{ string } selector 选择器
 * @retures 函数节点
 */
function $(selector) {
	let nodeList = document.querySelectorAll(selector);
	switch (nodeList.length) {
		case 0:
			return console.warn(`${selector}没有获取节点`);
			break;
		case 1:
			return nodeList[0];
			break;
		default:
			return nodeList;
			break;
	}
}

// 封装tab渲染函数
// 1.实现基本功能
// 2.确认函数名字--tab
// 3.确认参数 -- tabSelector, tabClassName,contSelector,contClassName
// 4.确认是否需要返回值 --不需要
// 5.将功能代码放入函数壳子,替换对应变量
function tab(tabSelector, tabClassName, contSelector, contClassName) {
	// 1.获取相应节点$("#textTab ul li")
	$(tabSelector).forEach(function (v, i) {
		// 2.先遍历给li绑定点击事件
		v.addEventListener("click", function () {
			// 3.先排他,将所有li的激活样式移除
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				//遍历时.下面的div盒子也消失
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			// 4.再给当前被点击的增加激活样式
			this.classList.add(tabClassName);
			//再给当前被点击的增加显示
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
// 函数调用
// 函数优化
